<template>
  <!-- 校内公告 -->
  <div class="xiaonei-notice">
    <van-tabs
      v-model="active"
      swipeable
      color="#6A4781"
      title-active-color="#6A4781"
      :ellipsis="false"
    >
      <van-tab v-for="(item, index) in noticeList" :key="index" :name="item.id">
        <div slot="title" class="notice-title">
          <span>{{ item.name }}</span>
          <i
            class="notice-nums"
            :class="{ 'show-nums': item.isNewsNums > 0 }"
          >{{ item.isNewsNums || '' }}</i>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 公告内容 -->
    <div class="notice-info">
      <div
        v-for="(item, index) in noticeInfo"
        @click="setReadInfo(item)"
        :key="index"
        class="notice-info-item"
        :class="{ 'news-label': item.isNews == 0 }"
      >
        <van-row gutter="10" class="info-wrap">
          <van-col span="4">
            <!-- <div class="date font40" :class="item.isNews ==0?'news-date':'old-date'">{{item.date}}</div> -->
            <div class="date font40 news-date">{{ item.date }}</div>
          </van-col>
          <van-col span="20">
            <span class="content font28 is-news">{{ item.content }}</span>
            <span class="active-svg font28" v-if="item.isTop == 1">【置顶】</span>
            <!-- <div class="content-wrap">
              <div class="content font28 is-news">{{ item.content }}</div>
            </div>-->
          </van-col>
        </van-row>
      </div>
      <!-- 校内公告更多 -->
      <div class="notice-more font28" @click="skipRouter" v-if="noticeInfo.length>0">更多校内公告 ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Notice",
  data() {
    return {
      active: 1,
      noticeList: [] // 校内公告信息
    };
  },
  computed: {
    noticeInfo() {
      return (
        this.noticeList.length > 0 &&
        this.noticeList.find(item => item.id == this.active).noticeInfo
      );
    }
  },
  mounted() {
    this.getNoticeList();
  },
  methods: {
    // 接口查询获取校内公告
    getNoticeList() {
      this.noticeList = [
        {
          id: 1,
          name: "办公通知",
          noticeInfo: [
            {
              id: 1,
              content:
                "[科技处1]北京建筑大学第七届GIS应用技能大赛暨第八届全国大学生GIS技能应用大赛选拨赛通知GIS技能应用大赛选拨赛通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              isNews: 0, // 最新未读 0未读  1已读
              nums: 1111, // 阅读数量
              isTop: 1
            },
            {
              id: 2,
              content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              isNews: 0, // 最新未读 0未读  1已读
              nums: 1111, // 阅读数量
              isTop: 1
            },
            {
              id: 3,
              content: "[科技处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              isNews: 0, // 最新未读 0未读  1已读
              nums: 1111, // 阅读数量
              isTop: 0
            },
            {
              id: 4,
              content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              isNews: 0, // 最新未读 0未读  1已读
              nums: 1111, // 阅读数量
              isTop: 0
            }
          ]
        },
        {
          id: 2,
          name: "教学通知",
          noticeInfo: [
            {
              id: 1,
              content: "[科技处2]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              nums: 1111, // 阅读数量
              isTop: 0,
              isNews: 1 // 最新未读
            },
            {
              id: 2,
              content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              isNews: 0, // 最新未读 0未读  1已读
              nums: 1111, // 阅读数量
              isTop: 0
            },
            {
              id: 3,
              content: "[科技处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              isNews: 0, // 最新未读 0未读  1已读
              nums: 1111, // 阅读数量
              isTop: 0
            },
            {
              id: 4,
              content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              nums: 1111, // 阅读数量
              isTop: 0,
              isNews: 1 // 最新未读
            }
          ]
        },
        {
          id: 3,
          name: "科研通知",
          noticeInfo: [
            {
              id: 1,
              content: "[科技处3]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              nums: 1111, // 阅读数量
              isTop: 0,
              isNews: 1 // 最新未读
            },
            {
              id: 2,
              content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              isNews: 0, // 最新未读 0未读  1已读
              nums: 1111, // 阅读数量
              isTop: 0
            },
            {
              id: 3,
              content: "[科技处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              nums: 1111, // 阅读数量
              isTop: 0,
              isNews: 1 // 最新未读
            },
            {
              id: 4,
              content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
              date: 1575300387725,
              departMent: "测绘与城市空间信息学院",
              publisher: "谁谁谁,谁是谁的睡",
              isCollected: 1, // 1为已收藏、0 为未收藏
              isNews: 0, // 最新未读 0未读  1已读
              nums: 1111, // 阅读数量
              isTop: 0
            }
          ]
        },
        {
          id: 4,
          name: "学工通知",
          noticeInfo: []
        },
        {
          id: 5,
          name: "其他专区1",
          noticeInfo: []
        }
      ];
      // 筛选当中为最新未读消息的数量并重置数据
      this.noticeList.map(item => {
        item.isNewsNums = item.noticeInfo.filter(m => m.isNews == 0).length;
        item.noticeInfo.map(val => {
          val.date = new Date(val.date).format("MM-dd");
        });
      });
      this.active = this.noticeList[0].id;
    },
    // 设置为已读
    setReadInfo(item) {
      item.isNews = 1; // 设置为已读后 接口并接参数给后台
      console.log(this.noticeInfo, "当前公告");
      this.$router.push({ path: "noticeIndex/content" });
      this.$store.dispatch("set_notice_id", item.id); // 保存当前ID到仓库
    },
    // 跳转路由
    skipRouter() {
      this.$router.push({ name: "notificationlist" });
    }
  }
};
</script>

<style lang="less" scoped>
// 校内公告
.xiaonei-notice {
  border-bottom: 10px solid #e5e5e7;
  .van-tab--active {
    div span {
      color: #6a4781;
    }
  }
  .notice-title {
    span {
      display: inline-block;
      vertical-align: middle;
    }
    .notice-nums {
      display: inline-block;
      vertical-align: middle;
      width: 17px;
      height: 17px;
      line-height: 17px;
      margin-left: 3px;
      color: #fff;
      border-radius: 50%;
      &.show-nums {
        background-color: #e81b1b;
      }
    }
  }
  .notice-info {
    // height: 340px;
    // overflow-y: auto;
    // overflow-x: hidden;
    padding-left: 10px;
    &-item {
      position: relative;
      border-bottom: 0.5px solid #eee;
      padding: 15px 0 12px;
      font-size: 14px;
      .date {
        color: #fff;
        text-align: center;
        height: 35px;
        line-height: 35px;
        border-radius: 4px;
        font-size: 14px;
        &.news-date {
          background-color: #9f89ad;
        }
        &.old-date {
          background-color: rgba(159, 137, 173, 0.47);
        }
      }
      .active-svg {
        width: 100%;
        text-align: right;
        display: inline-block;
        color: tomato;
      }
      .content {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 6px;
        &.is-news {
          color: #6a4781;
        }
        &.old-news {
          color: #777;
        }
      }
      // 最新标签
      &.news-label {
        &::after {
          content: "";
          position: absolute;
          right: 0;
          top: 0;
          z-index: 10;
          width: 24px;
          height: 24px;
          background: url("../../../assets/images/info-news.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .notice-more {
      color: #d2c7d8;
      text-align: center;
      padding: 12px 0 16px;
    }
  }
}
</style>
